<template>
  <el-card v-loading="loading" shadow="never">
    <el-row>
      <span>进行中的任务: {{ countNumber }}</span>
      <el-col class="text-center" style="margin-top: 10px">
        <el-scrollbar height="250px">
          <el-card
            class="contcard"
            v-for="(ele, index) in datas"
            :key="index"
            style="padding: 5px"
            v-loading="loading"
            shadow="never"
            @click="fenpei(ele)"
          >
            <!-- <el-tag type="success">已完成</el-tag> -->
            <el-tag type="warning" class="tag">进行中</el-tag>
            <!-- <el-tag type="danger">未完成</el-tag> -->
            <div class="title">任务名称: {{ ele.task_name }}</div>
            <div class="people">负责人:{{ ele.username }}</div>
            <el-progress :percentage="ele.process" :color="customColor" />
          </el-card>
        </el-scrollbar>
      </el-col>
      <el-col>
        <div id="numberEchart" :style="{ height: height + 'px' }"></div>
      </el-col>
    </el-row>
  </el-card>
  <!-- 任务详情 -->
  <el-dialog
    v-model="fenpeidialog"
    :title="'任务详情'"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :before-close="cancel"
    style="height: 700px; width: 1000px"
    top="5vh"
  >
    <el-scrollbar height="590px">
      <div class="divpad">任务名称：{{ fenpeidata.task_name }}</div>
      <!-- <div>团队介绍：{{ fenpeidata.team_introduce }}</div> -->
      <div class="divpad">任务创建时间：{{ fenpeidata.create_time }}</div>
      <div class="divpad">任务截止时间：{{ fenpeidata.end_date }}</div>
      <div class="divpad">
        任务状态：
        <!-- 判断任务状态，返回不同的显示内容 -->
        <span v-if="fenpeidata.task_status == '1'"> 未完成 </span>
        <span v-if="fenpeidata.task_status == '2'"> 进行中</span>
        <span v-if="fenpeidata.task_status == '3'"> 已完成</span>
        <span v-if="fenpeidata.task_status == '4'"> 未开始 </span>
      </div>
      <el-form-item disabled label="任务描述：" prop="task_detail">
        <!-- <RichEditor v-model="fenpeidata.task_detail" /> -->
        <br />
        <div v-html="fenpeidata.task_detail"></div>
      </el-form-item>
      <el-form-item disabled label="跟进记录：" prop="task_detail">
        <el-timeline style="margin-top: 10px">
          <el-timeline-item
            style="width: 100%"
            v-for="(ele, index) in fenpeidata.getRecord"
            :key="index"
            :timestamp="ele.create_time"
            placement="top"
          >
            <el-card>
              <span style="font-weight: 700">跟进内容：</span>
              <div v-html="ele.content"></div>
              <div style="display: flex">
                <span style="font-weight: 700; width: 100px"> 任务进度：</span>
                <el-progress
                  style="width: 100%"
                  v-if="ele.process <= 30"
                  :text-inside="true"
                  :stroke-width="20"
                  :percentage="ele.process"
                  status="exception"
                />
                <el-progress
                  style="width: 100%"
                  v-if="ele.process > 30 && ele.process <= 60"
                  :text-inside="true"
                  :stroke-width="22"
                  :percentage="ele.process"
                  status="warning"
                />
                <el-progress
                  style="width: 100%"
                  v-if="ele.process > 60 && ele.process <= 80"
                  :text-inside="true"
                  :stroke-width="26"
                  :percentage="ele.process"
                />

                <el-progress
                  style="width: 100%"
                  v-if="ele.process > 80 && ele.process <= 100"
                  :text-inside="true"
                  :stroke-width="24"
                  :percentage="ele.process"
                  status="success"
                />
              </div>

              <p style="color: #bfcbd9; font-size: 13px; text-align: right">
                {{ ele.user_name }} 提交于 {{ ele.create_time }}
              </p>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </el-form-item>
    </el-scrollbar>
    <!-- <div style="display: flex; justify-content: center">
        <el-button :loading="loading" @click="cancel">取消</el-button>
        <el-button :loading="loading" type="primary" @click="feipeisubmit">提交</el-button>
      </div> -->
  </el-dialog>
</template>

<script>
import { tasklist } from '@/api/system/index'
import { info } from '@/api/test/test'
export default {
  name: 'SystemIndexCount',
  data() {
    return {
      loading: false,
      fenpeidialog: false,
      datas: [],
      idkey: 'task_id',
      fenpeidata: {},
      countNumber: 0,
      percentage: 20,
      customColor: '#409eff',
      customColors: [
        { color: '#f56c6c', percentage: 20 },
        { color: '#e6a23c', percentage: 40 },
        { color: '#5cb87a', percentage: 60 },
        { color: '#1989fa', percentage: 80 },
        { color: '#6f7ad3', percentage: 100 }
      ]
    }
  },
  computed: {
    name() {
      return this.$t('common.Count statistic')
    }
  },
  watch: {
    name() {
      this.count()
    }
  },
  created() {
    this.tasklist()
  },
  methods: {
    tasklist() {
      this.loading = true
      tasklist({ task_status: 2 })
        .then((res) => {
          this.datas = res.data.list
          this.countNumber = res.data.count
          this.loading = false
        })
        .catch(() => {
          this.loading = false
        })
    },
    cancel() {
      this.fenpeidialog = false
    },
    // 任务详情
    fenpei(row) {
      this.fenpeidialog = true
      this.dialogTitle = '任务详情'
      var id = {}
      id[this.idkey] = row[this.idkey]
      info(id)
        .then((res) => {
          // this.reset(res.data)
          this.fenpeidata = res.data
          console.log(this.fenpeidata)
        })
        .catch(() => {})
    }
  }
}
</script>
<style>
.contcard {
  margin-top: 5px;
  position: relative;
  .tag {
    position: absolute;
    top: 10px;
    right: 10px;
  }
  .el-card__body {
    padding: 5px;
  }
}
.title {
  text-align: left;
  font-weight: 700;
  font-size: 20px;
}
.people {
  margin: 5px 0;
  text-align: left;
  color: #666;
}
.el-timeline-item__content {
  display: block;
  width: 840px;
}
</style>
